<style lang="less" scoped>
    .product {
        padding-bottom: 0.98rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: auto;

        .product_list_box {
            width: 50%;
            height: 100%;
            .product_list {
                background: #fff;
                margin: 0.24rem 0.08rem 0;
                /*高限死*/
                height: 5.08rem;
                position: relative;
                img {
                    width: 3.6rem;
                    height: 3.6rem;
                    display: block;
                    margin: 0 auto;
                }

                h3 {
                    margin: 0.16rem 0.2rem 0;
                    font-size: 0.24rem;
                    line-height: 0.36rem;
                    font-weight: normal;
                    display: -webkit-box;
                    /*! autoprefixer: off */
                    -webkit-box-orient: vertical;
                    /* autoprefixer: on */
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }

                .price_num {
                    padding: 0 0.2rem;
                    width: 100%;
                    height: 0.6rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    .price {
                        color: #d43428;
                        font-size: 0.3rem;

                        span {
                            font-size: 12px;
                        }
                    }
                    .num {
                        text-align: right;
                        color: #9b9b9b;
                        font-size: 0.24rem;
                    }

                }
            }
        }
    }
</style>

<template>
    <!-- 商品列表信息 -->
    <div class="product">
        <!-- 接收过来的数组为已经处理好数据的数组 -->
        <div v-for="shop in list" class="product_list_box">
            <div v-on:click="tabclick(shop.type,shop.templateId)">
                <div class="product_list">
                    <img v-lazy="{src:shop.productInfo.mainImage}" alt="">
                    <h3><i :class="shop.type == '3' || shop.type == '1' ?'mall_proprietary_icon':shop.type == '5'?'province_recommend_icon':''"></i>{{shop.productInfo.name}}</h3>
                    <div class="price_num">
                        <p class="price"><span>￥</span>{{shop.minSellPrice || '0.00'}}</p>
                        <p class="num" v-if="isCollage">已拼{{shop.sales || 0}}件</p>
                        <p class="num" v-else>销量{{shop.sales || 0}}件</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            list: {
                type: Array,
                default: function () {
                    return []
                }
            },
            isCollage: {
                type: Boolean,
                default: false  //  传true  为拼购
            }
        },
        mounted: function () {
//            console.log(this.shopingList)
        },
        methods: {
            tabclick(type, templateId) {
                if(this.$route.query.sharePage && this.$route.query.sharePage == '1'){
                    this.comJS.openApp();
                }else{
                    this.$router.push({
                        path: '/home/product_details',
                        query: {
                            type: type,
                            templateId: templateId
                        }
                    })
                }

            }
        }
    }
</script>

